<template>
  <div>
    <div id="map" style="width:500px;height:400px;"></div>
      <div class="navSchool">
        <a href="https://apis.map.qq.com/uri/v1/routeplan?type=bus&from=我的家&fromcoord=39.980683,116.302&to=中关村&tocoord=39.9836,116.3164&policy=1&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77">到校交通导航</a>
      </div>
  </div>
</template>

<script>
export default {
    name: 'navigationSchool',
    data () {
        return {
          longitude: "",
          latitude: ""
        }
    },
    methods: {
      init() {
        let address = "";
        let that = this;
        var center = new qq.maps.LatLng(34.754152, 113.667636);
        var map = new qq.maps.Map(document.getElementById('map'), {
          center: center,
          zoom: 13,
          disableDefaultUI: true
        });
        var marker = new qq.maps.Marker({
          position: center,
          map: map
        });
        var infoWin = new qq.maps.InfoWindow({
          map: map
        });
        var geocoder = new qq.maps.Geocoder({
          complete: function(res) {
            console.log(res);
            address = res.detail.nearPois[0].name;
          }
        });
        qq.maps.event.addListener(map, "click", function(event) {
          this.longitude = event.latLng.getLat();
          this.latitude = event.latLng.getLng();
          console.log(event);
          let lat = new qq.maps.LatLng(this.longitude, this.latitude);
          geocoder.getAddress(lat);
          setTimeout(() => {
            infoWin.open();
            infoWin.setContent(
              '<div style="text-align:center;white-space:nowrap;">' +
                address +
                "</div>"
            );
            infoWin.setPosition(event.latLng);
          }, 200);
        });
      }
    },
    mounted() {
      this.init();
    },
    components: {

    }
}
</script>

<style scoped>
  .navSchool{
    margin-top: 20px;
    margin-left: 10px;
    background-color: #949292;
  }
</style>
